<!--
 * @Author: 黄达全
 * @Date: 2024-08-07 00:10:56
 * @LastEditTime: 2024-08-08 22:46:27
-->
<script lang="ts" setup>
import { ref } from "vue"
// import type {ref} from "vue"

const { title } = defineProps({
    title: {
        type: String,
        default: ""
    },
    width: {
        type: Number,
        default: 400
    }
})


const dialogVisible = ref<boolean>(false)
const emits=defineEmits(["submit"])

const open = () => {
    dialogVisible.value = true
}
const close = () => {
    dialogVisible.value = false
}

const submit = () => {
    emits("submit")
}

defineExpose({
    open,
    close
})

</script>

<template>
    <el-dialog v-model="dialogVisible" :title="title" :width="width" align-center append-to-body>
        <div>
        <slot name="body"></slot>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button color="var(--primary-theme-color)" type="primary" @click="submit">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
// .el-button {
//     background-color: ;
//     color: white;
// }
</style>
